<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>梳理配置项</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <!-- a怎么用 -->
      <!-- <h1 :x="a">{{a}}</h1> -->
      <!-- <input type="text" v-model="a"> -->
      <!-- <button @click="a+=1">点我</button> -->
      
      <!-- b怎么用 -->
      <!-- 19行、20行，没有语法上的错误，但使用的没意义 -->
      <!-- <h1 :x="b">{{b}}</h1> -->
      <!-- <input type="text" v-model="b"> -->
      <!-- <button @click="b">点我</button> -->
      <!-- <h1>{{b()}}</h1> -->

      <!-- c能怎么用 -->
      <!-- <h1 :x="c">{{c}}</h1> -->
      <!-- 下面这行能写，但要记得，配一个setter -->
      <!-- <input type="text" v-model="c"> -->
      <h1>{{c}}</h1>

    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el:'#demo',
        data:{
          a:1,
        },
        methods:{
          b(){
            console.log('b执行了')
            return 99
          }
        },
        computed:{
          c(){
            return (this.a+1)*10
          }
        },
        watch:{
          
        }
      })
      console.log(vm)
    </script>
  </body>
</html>